<template>
  <div class="app-container" style="padding: 10px 20px 20px">
    <div class="top_box">
      <div class="flex">
        <span :class='["top_btn",QueryForm.search_type===0 ? "active" : ""]'
              @click="Query(0,QueryForm.search_data_type)">今日</span>
        <span :class='["top_btn",QueryForm.search_type===1 ? "active" : ""]'
              @click="Query(1,QueryForm.search_data_type)">一周</span>
        <span :class='["top_btn",QueryForm.search_type===2 ? "active" : ""]'
              @click="Query(2,QueryForm.search_data_type)">二周</span>
        <span :class='["top_btn",QueryForm.search_type===3 ? "active" : ""]'
              @click="Query(3,QueryForm.search_data_type)">一月</span>
        <span :class='["top_btn",QueryForm.search_type===4 ? "active" : ""]'
              @click="Query(4,QueryForm.search_data_type)">半年</span>
        <el-form ref="QueryForm" :model="QueryForm">
          <el-form-item label="日期区间：" label-width="100px">
            <el-date-picker
                style="float: left;width: 190px"
                v-model="QueryForm.start_time"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                clearable
                type="date"
                placeholder="请选择开始日期">
            </el-date-picker>
            <div style="float: left;margin: 0 10px">至</div>
            <el-date-picker
                @change="Query(QueryForm.search_type,QueryForm.search_data_type,QueryForm.start_time,QueryForm.end_time)"
                style="float: left;width: 190px"
                v-model="QueryForm.end_time"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                clearable
                type="date"
                placeholder="请选择结束日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="flex">
        <div :class='["top_item",QueryForm.search_data_type===1 ? "itemactive" : ""]'
             @click="Query(QueryForm.search_type,1)">
          <p class="top_item_name">未接单</p>
          <p class="top_item_value">{{ top_data.no_get_orders_count }}</p>
        </div>
        <div :class='["top_item",QueryForm.search_data_type===2 ? "itemactive" : ""]'
             @click="Query(QueryForm.search_type,2)">
          <p class="top_item_name">已接单</p>
          <p class="top_item_value">{{ top_data.get_orders_count }}</p>
        </div>
        <div :class='["top_item",QueryForm.search_data_type===3 ? "itemactive" : ""]'
             @click="Query(QueryForm.search_type,3)">
          <p class="top_item_name">生产中</p>
          <p class="top_item_value">{{ top_data.working_count }}</p>
        </div>
        <div :class='["top_item",QueryForm.search_data_type===4 ? "itemactive" : ""]'
             @click="Query(QueryForm.search_type,4)">
          <p class="top_item_name">生产完成</p>
          <p class="top_item_value">{{ top_data.worked_count }}</p>
        </div>
        <div class='top_item_nohover'>
          <p class="top_item_name">预生产库存</p>
          <p class="top_item_value">{{ top_data.pre_production_count }}</p>
        </div>
        <div class='top_item_nohover'>
          <p class="top_item_name">待发货</p>
          <p class="top_item_value">{{ top_data.to_be_delivered_count }}</p>
        </div>
        <div :class='["top_item",QueryForm.search_data_type===7 ? "itemactive" : ""]'
             @click="Query(QueryForm.search_type,7)">
          <p class="top_item_name">已发货</p>
          <p class="top_item_value">{{ top_data.delivered_count }}</p>
        </div>
      </div>
    </div>
    <div class="center_box flex">
      <div id="bar" style="width: 39%;height:100%;"></div>
      <div id="pie1" style="width: 20%;height:100%;"></div>
      <div id="pie2" style="width: 20%;height:100%;"></div>
      <div style="width: 20%;height:100%;position: relative">
        <el-button class="pierightbtn" @click="pie3dialogEcharts" size="mini" type="primary">更多</el-button>
        <div id="pie3" style="width: 100%;height:100%;"></div>
      </div>
    </div>
    <div class="bottom_box flex">
      <div id="line1" style="width: 38%;height:100%;"></div>
      <div class="bottom_table">
        <div style="font-weight: 800;font-size: 18px;color: #464646;height: 50px;line-height: 40px;text-align: left">
          超7日客户top10
        </div>
        <el-table :data="bottom_data.overtime_user_list" border>
          <el-table-column align="center" label="工期日期" width="90" prop="first_time"></el-table-column>
          <el-table-column align="center" label="客户名称" prop="baseusername"></el-table-column>
          <el-table-column align="center" label="台数" width="90" prop="count"></el-table-column>
        </el-table>
      </div>
      <div style="width: 38%;height:100%;position: relative">
        <div style="width:72%;position: absolute;right: 0;top: 5px;z-index: 1">
          <span :class='["mchtype",mchtypenum==="全部" ? "active" : ""]' @click="clickmchtype('全部')">全部</span>
          <span v-for="item in this.bottom_data.get_sale_mch_type_line.search_item"
                :class='["mchtype",mchtypenum===item ? "active" : ""]' @click="clickmchtype(item)">
            {{ item }}
          </span>
        </div>
        <div id="line2" style="width: 100%;height:50%;"></div>
        <div id="line3" style="width: 100%;height:50%;"></div>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" title="" :visible.sync="pie3dialog" width="900px" top="1%">
      <div id="pie3dialog" style="width: 700px;height:800px;margin: 0 auto"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Echarts',
  data() {
    return {
      mchtypenum: '全部',
      QueryForm: {
        start_time: '',
        end_time: '',
        search_type: '',
        search_data_type: '',
      },
      top_data: {
        delivered_count: 0,
        get_orders_count: 0,
        no_get_orders_count: 0,
        pre_production_count: 0,
        to_be_delivered_count: 0,
        worked_count: 0,
        working_count: 0,
      },
      middle_data: {
        bar: {
          series_data: [],
          xAxis_data: [],
        },
        box_pie: {
          total_count: 0,
          series_data: [],
        },
        repeat_pie: {
          total_count: 0,
          series_data: []
        },
        provice_pie: {
          total_count: 0,
          series_data: []
        },
        province_pie_count: {
          total_count: 0,
          series_data: []
        },
      },
      bottom_data: {
        work_line: {
          legend_data: [],
          series: [],
          xAxis_data: [],
        },
        overtime_user_list: [],
        get_sale_mch_type_line: {
          sale_line_data: {
            legend_data: [],
            series_data: [],
            xAxis_data: [],
          },
          search_item: [],
        },
        get_customer_repair_line: {
          sale_line_data: {
            legend_data: [],
            series_data: [],
            xAxis_data: [],
          },
        }
      },
      tableData: [],
      pie3dialog: false,
    }
  },
  mounted() {
    this.Query(0)
    this.barEcharts();
    this.pie1Echarts();
    this.pie2Echarts();
    this.pie3Echarts();
    this.line1Echarts();
    this.line2Echarts();
    this.line3Echarts();
  },
  methods: {
    Query(num, type, start_time, end_time) {
      // num:今日，一周，二周，一月，半年
      // type:未接单，已接单，生产中，生产完成，预生产库存，代发货，已发货
      this.QueryForm.search_type = num
      if (this.QueryForm.search_data_type === type) {
        this.QueryForm.search_data_type = ''
      } else {
        this.QueryForm.search_data_type = type
      }
      if (start_time && end_time) {
        this.QueryForm.search_type = 5
      } else {
        this.QueryForm.start_time = ''
        this.QueryForm.end_time = ''
      }
      this.$post(this.$api + '/RK/sale_and_work_statistics', this.QueryForm)
          .then((res) => {
            if (res.code === 0) {
              this.top_data = res.data.top_data
              this.middle_data = res.data.middle_data
              for (var i in this.middle_data.provice_pie.series_data) {
                //去掉pie3图表中数据的“省”字
                this.middle_data.provice_pie.series_data[i].name = this.middle_data.provice_pie.series_data[i].name.split('省')[0]
              }
              this.bottom_data = res.data.bottom_data
              for (var b in this.bottom_data.overtime_user_list) {
                //工期日期去掉只显示年月日
                if (this.bottom_data.overtime_user_list[b].first_time) {
                  this.bottom_data.overtime_user_list[b].first_time = this.bottom_data.overtime_user_list[b].first_time.substring(0, 10)
                }
              }
              for (var n = 0; n < 10; n++) {
                //超七日客户TOP10不足10个数据时补空格
                if (this.bottom_data.overtime_user_list.length < 10) {
                  this.bottom_data.overtime_user_list.push({})
                }
              }
              this.barEcharts();
              this.pie1Echarts();
              this.pie2Echarts();
              this.pie3Echarts();
              this.line1Echarts();
              this.line2Echarts();
              this.line3Echarts();
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
    },
    //点击机器类型查询当月销售数据
    clickmchtype(num) {
      this.mchtypenum = num
      this.$get(this.$api + '/RK/get_sale_mch_type_line', { mch_type: this.mchtypenum })
          .then((res) => {
            if (res.code === 0) {
              this.bottom_data.get_sale_mch_type_line = res.data;
              this.line2Echarts();
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
    },
    //左侧柱状图
    barEcharts() {
      const barChart = this.$echarts.init(document.getElementById('bar'));
      barChart.clear()
      barChart.off('click') // 如果不加off事件，就会叠加触发
      barChart.showLoading({
        text: '正在努力的读取数据中...'
      });
      const baroption = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: "category",
          data: this.middle_data.bar.xAxis_data,
          axisLabel: {
            interval: 0,
            rotate: -45,
            margin: 10,
            textStyle: {
              fontSize: 12
            },
          },
        },
        yAxis: {
          axisLabel: {
            show: false,
          },
        },
        grid: {
          x: 10,
          x2: 20,
        },
        series: [{
          type: 'bar',
          data: this.middle_data.bar.series_data,
          label: {
            normal: {
              show: true,
              position: ['-5', '-20'],
              distance: 1,
              rotate: 45,
              rich: {
                a: {
                  color: '#000000',
                  align: 'left',
                },
              }
            }
          }
        }]
      };
      barChart.on('click', function (params) {
        console.log(params);
      })
      barChart.hideLoading()
      barChart.setOption(baroption);
    },
    //主副柜饼图1
    pie1Echarts() {
      const pie1Chart = this.$echarts.init(document.getElementById('pie1'));
      pie1Chart.clear();
      pie1Chart.off('click') // 如果不加off事件，就会叠加触发
      pie1Chart.showLoading({
        text: '正在努力的读取数据中...'
      });
      const pie1option = {
        title: {
          text: '总数：' + this.middle_data.box_pie.total_count,
          top: 10
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '80%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center',
              formatter: "{b}: {c}"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.middle_data.box_pie.series_data
          }
        ]
      };
      pie1Chart.on('click', function (params) {
        console.log(params);
      })
      pie1Chart.hideLoading()
      pie1Chart.setOption(pie1option);
    },
    //新户复购用户饼图2
    pie2Echarts() {
      const pie2Chart = this.$echarts.init(document.getElementById('pie2'));
      pie2Chart.clear();
      pie2Chart.off('click') // 如果不加off事件，就会叠加触发
      pie2Chart.showLoading({
        text: '正在努力的读取数据中...'
      });
      const pie2option = {
        title: {
          text: '总数：' + this.middle_data.repeat_pie.total_count,
          top: 10
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '80%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center',
              formatter: "{b}: {c}"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.middle_data.repeat_pie.series_data
          }
        ]
      };
      pie2Chart.on('click', function (params) {
        console.log(params);
      })
      pie2Chart.hideLoading()
      pie2Chart.setOption(pie2option);
    },
    //地区饼图3
    pie3Echarts() {
      const pie3Chart = this.$echarts.init(document.getElementById('pie3'));
      pie3Chart.clear();
      pie3Chart.off('click') // 如果不加off事件，就会叠加触发
      pie3Chart.showLoading({
        text: '正在努力的读取数据中...'
      });
      const pie3option = {
        title: {
          text: '总数：' + this.middle_data.provice_pie.total_count,
          top: 10
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '80%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center',
              formatter: "{b}: {c}"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '38',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.middle_data.provice_pie.series_data
          }
        ]
      };
      pie3Chart.on('click', function (params) {
        console.log(params);
      })
      pie3Chart.hideLoading()
      pie3Chart.setOption(pie3option);
    },
    //生产数据折线图
    line1Echarts() {
      const line1Chart = this.$echarts.init(document.getElementById('line1'));
      line1Chart.clear();
      line1Chart.off('click') // 如果不加off事件，就会叠加触发
      line1Chart.showLoading({
        text: '正在努力的读取数据中...'
      });
      const line1option = {
        title: {
          text: '生产数据',
          top: 10
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.bottom_data.work_line.legend_data,
          top: '95%',
          left: 'center'
        },
        grid: {
          x2: 50,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.bottom_data.work_line.xAxis_data
        },
        yAxis: {
          type: 'value'
        },
        series: this.bottom_data.work_line.series
      };
      line1Chart.on('click', function (params) {
        console.log(params);
      })
      line1Chart.hideLoading()
      line1Chart.setOption(line1option);
    },
    //当月销售数据折线图
    line2Echarts() {
      const line2Chart = this.$echarts.init(document.getElementById('line2'));
      line2Chart.clear();
      line2Chart.off('click') // 如果不加off事件，就会叠加触发
      line2Chart.showLoading({
        text: '正在努力的读取数据中...'
      });
      const line2option = {
        title: {
          text: '当月销售数据',
          top: 10,
          left: 20,
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          x: 50,
          x2: 20,
          y2: 70
        },
        legend: {
          data: this.bottom_data.get_sale_mch_type_line.sale_line_data.legend_data,
          bottom: 0,
          left: 'center'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.bottom_data.get_sale_mch_type_line.sale_line_data.xAxis_data
        },
        yAxis: {
          type: 'value'
        },
        series: this.bottom_data.get_sale_mch_type_line.sale_line_data.series_data
      };
      line2Chart.on('click', function (params) {
        console.log(params);
      })
      line2Chart.hideLoading()
      line2Chart.setOption(line2option);
    },
    //当月售后数据折线图
    line3Echarts() {
      const line3Chart = this.$echarts.init(document.getElementById('line3'));
      line3Chart.clear();
      line3Chart.off('click') // 如果不加off事件，就会叠加触发
      line3Chart.showLoading({
        text: '正在努力的读取数据中...'
      });
      const line3option = {
        title: {
          text: '当月售后数据',
          top: 10,
          left: 20,
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          x: 50,
          x2: 20,
          y2: 45
        },
        legend: {
          data: this.bottom_data.get_customer_repair_line.sale_line_data.legend_data,
          bottom: '1%',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.bottom_data.get_customer_repair_line.sale_line_data.xAxis_data
        },
        yAxis: {
          type: 'value'
        },
        series: this.bottom_data.get_customer_repair_line.sale_line_data.series_data
      };
      line3Chart.on('click', function (params) {
        console.log(params);
      })
      line3Chart.hideLoading()
      line3Chart.setOption(line3option);
    },
    //地区饼图3弹框
    pie3dialogEcharts() {
      this.pie3dialog = true
      setTimeout(() => {
        const pie3dialogChart = this.$echarts.init(document.getElementById('pie3dialog'));
        pie3dialogChart.clear();
        pie3dialogChart.off('click') // 如果不加off事件，就会叠加触发
        pie3dialogChart.showLoading({
          text: '正在努力的读取数据中...'
        });
        const pie3dialogoption = {
          title: {
            text: '总数：' + this.middle_data.province_pie_count.total_count,
            top: 10
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '85%',
            left: 'center'
          },
          series: [
            {
              type: 'pie',
              radius: ['50%', '90%'],
              center: ['50%', '40%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center',
                formatter: "{b}"
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '38',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.middle_data.province_pie_count.series_data
            }
          ]
        };
        pie3dialogChart.on('click', function (params) {
          console.log(params);
        })
        pie3dialogChart.hideLoading()
        pie3dialogChart.setOption(pie3dialogoption);
      }, 500)
    },

  }
}
</script>

<style lang="scss">
.pierightbtn {
  position: absolute;
  right: 0;
  top: 10px;
  z-index: 1;
}

.active {
  color: #459DF5 !important;
  border-bottom: 1px solid #459DF5;
}

.itemactive {
  border: 2px solid #EE6666 !important;
  color: #EE6666 !important;
}

.top_box {
  padding-bottom: 20px;

  .top_btn {
    display: inline-block;
    font-size: 14px;
    color: #606266;
    height: 40px;
    line-height: 40px;
    font-weight: 800;
    width: 60px;
    margin: 0 10px;
    text-align: center;
    cursor: pointer;

    &:hover {
      color: #459DF5;
      border-bottom: 1px solid #459DF5;
    }
  }

  .top_item_nohover {
    border: 2px solid #459DF5;
    color: #459DF5;
    border-radius: 10px;
    text-align: center;
    width: 13%;
    margin-right: 2%;
    font-size: 30px;
    cursor: default;

    .top_item_name {
      margin-bottom: 2px;
    }

    .top_item_value {
      margin-top: 2px;
    }

    &:last-child {
      margin-right: 0;
    }

    p {
      margin: 10px;
    }
  }

  .top_item {
    border: 2px solid #459DF5;
    color: #459DF5;
    border-radius: 10px;
    text-align: center;
    width: 13%;
    margin-right: 2%;
    font-size: 30px;
    cursor: pointer;

    .top_item_name {
      margin-bottom: 2px;
    }

    .top_item_value {
      margin-top: 2px;
    }

    &:hover {
      border: 2px solid #EE6666;
      color: #EE6666;
    }

    &:last-child {
      margin-right: 0;
    }

    p {
      margin: 10px;
    }
  }
}

.center_box {
  border-top: 1px solid #000000;
  height: 350px;
}

.bottom_box {
  border-top: 1px solid #000000;
  height: 450px;
  text-align: center;

  .bottom_table {
    width: 24%;
    height: 100%;
  }

  .mchtype {
    font-size: 16px;
    margin-left: 5px;
    line-height: 20px;
    cursor: pointer;

    &:hover {
      color: #459DF5;
      border-bottom: 1px solid #459DF5;
    }
  }
}

.flex {
  display: flex;
}
</style>
<style>
.bottom_box .el-table td, .el-table th {
  height: 36px !important;
}
</style>
